import React, { useState } from 'react'
import { NavBar } from 'antd-mobile';
import { useLocation, useNavigate } from 'react-router-dom';
import { Input } from '@nutui/nutui-react'
import { Eye, Marshalling } from '@nutui/icons-react'
import '../css/ChangePayPwd.scss'
import { ChangePayPwd2 } from '../../../request/instance'
import { Toast } from '@nutui/nutui-react'
const regex = new RegExp(/^[0-9]{6}$/)
export default function ChangePayPwd() {
    const { state: { _id } } = useLocation()

    const navigate = useNavigate()
    const back = () => navigate(-1)
    const [inputType, setInputType] = useState('password')
    const [inputType1, setInputType1] = useState('password')
    const [inputType2, setInputType2] = useState('password')
    const [val, setVal] = useState('')
    const [val1, setVal1] = useState('')
    const [val2, setVal2] = useState('')


    const ChangePayPwd1 = async () => {
        if (val1 !== val2) { // 验证密码是否一致
            alert('两次密码不一致')
            return
        } else if (!regex.test(val1) && !regex.test(val2)) {
            Toast.show({
                content: '请输入6位的密码',
                icon: 'warn',
            })
            return
        }
        let res = await ChangePayPwd2({ _id: _id, pwd: val, val1: val1 })
        if (res.data.code == 200) {
            // 密码验证通过提示修改成功并且跳转到我的页面
            Toast.show({
                content: res.data.msg,
                icon: 'success',
            })
            navigate('/show/mine')
            // console.log(res.data.msg);
        } else {
            // 表示原密码不正确
            Toast.show({
                content: res.data.msg,
                icon: 'fail',
            })
        }



    }
    return (
        <div className='ChangePayPwd'>
            <NavBar onBack={back}>商城订单</NavBar>
            {/* 原密码 */}
            <div
                style={{
                    display: 'flex',
                    alignItems: 'center',
                    background: '#fff',
                    padding: '0 10px',
                    margin: '10px 0',
                }}
            >
                <div className="left" style={{ flex: "1" }}>原密码</div>
                <Input type={inputType} placeholder="请输入原密码" style={{ flex: "5" }}
                    value={val}
                    onChange={e => setVal(e)}
                />
                <div
                    className="right"
                    onClick={() =>
                        setInputType(inputType === 'text' ? 'password' : 'text')
                    }
                >
                    {inputType === 'text' ? (
                        <Eye color="var(--nutui-gray-7)" />
                    ) : (
                        <Marshalling color="var(--nutui-gray-7)" />
                    )}
                </div>
            </div>
            {/* 密码 */}
            <div
                style={{
                    display: 'flex',
                    alignItems: 'center',
                    background: '#fff',
                    padding: '0 10px',
                    margin: '10px 0',
                    justifyContent: 'space-between',
                }}
            >
                <div className="left" style={{ flex: "1" }}>密码</div>
                <Input type={inputType1} placeholder="请输入新密码" style={{ flex: "5" }}
                    value={val1}
                    onChange={e => setVal1(e)}
                />
                <div
                    className="right"
                    onClick={() =>
                        setInputType1(inputType1 === 'text' ? 'password' : 'text')
                    }
                >
                    {inputType1 === 'text' ? (
                        <Eye color="var(--nutui-gray-7)" />
                    ) : (
                        <Marshalling color="var(--nutui-gray-7)" />
                    )}
                </div>
            </div>
            {/* 确认密码 */}
            <div
                style={{
                    display: 'flex',
                    alignItems: 'center',
                    background: '#fff',
                    padding: '0 10px',
                    margin: '10px 0',
                }}
            >
                <div className="left" style={{ flex: "1" }}>确认密码</div>
                <Input type={inputType2} placeholder="请输入新密码" style={{ flex: "5" }}
                    value={val2}
                    onChange={e => setVal2(e)}
                />
                <div
                    className="right"
                    onClick={() =>
                        setInputType2(inputType2 === 'text' ? 'password' : 'text')
                    }
                >
                    {inputType2 === 'text' ? (
                        <Eye color="var(--nutui-gray-7)" />
                    ) : (
                        <Marshalling color="var(--nutui-gray-7)" />
                    )}
                </div>
            </div>

            <div className='okpay'>
                <button onClick={ChangePayPwd1}>确定</button>
            </div>
        </div>
    )
}
